<i18n>
{
  "en": {
    "page_title": ""
  },
  "zh": {
    "page_title": ""
  }
}
</i18n>

<template>
  <el-container>
    <el-aside width="200px" class="aside-menu">
      <header class="tree-menu-title">产品目录</header>
      <el-tree
        ref="tree"
        node-key="id"
        :highlight-current="true"
        v-loading="dataLoading"
        :data="treeData"
        :props="treeProps"
        accordion
        @node-click="handleNodeClick">
      </el-tree>

    </el-aside>
    <el-main class="pt0 pr0" style="overflow:hidden">
      <Lists/>
    </el-main>
  </el-container>

</template>

<script>
  import Lists from './list';
  export default {
    data() {
      return {
        // 产品目录加载状态
        dataLoading: false,
        treeData: [],
        treeProps: {
          children: 'childList',
          label: 'name'
        }
      };
    },
    watch: {
      '$route': {
        handler: 'routeHandler',
        immediate: true
      }
    },
    created() {
      // this.treeData = mockTreeData;
      this.getProductDirList();

    },
     components: {
      Lists
    },
    computed: {
    },
    mounted() {

    },
    methods: {
      routeHandler(route) {

      },
      // 获取数据列表
      getProductDirList () {
        this.dataLoading = true
        this.$http({
          url: this.$http.adornUrl('/prm-os-srv-prod/queryProductDirList'),
          method: 'post',
          data: this.$http.adornParams({
          })
        }).then(data => {
          let treeData = data.data || [];

          let productDirectoryId = this.$route.query.productDirectoryId;

          if(!productDirectoryId) {
            if (treeData.length > 0) {
              productDirectoryId = treeData[0].id
              this.$router.push({ query: { productDirectoryId }})
            }
          }

          setTimeout(() => {
            let id = productDirectoryId
            if (id) {
              let tree = this.$refs.tree
              tree.setCurrentKey(id)
            }

          }, 0);

          this.treeData = treeData
          this.dataLoading = false
        })
      },
      handleNodeClick(node) {
         let productDirectoryId = node.id
         this.$router.push({ query: { productDirectoryId }})

      }
    }
  }
</script>

<style scoped>
  .aside-menu {
    padding: 15px;
    border-radius: 4px;
    position: relative;
    box-shadow: 5px 0px 15px 0px rgba(0, 0, 0, 0.1);
  }

  .pr0 {
    padding-right: 0;
  }

  .pt0 {
    padding-top: 0;
  }

  .tree-menu-title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 15px;
  }
</style>
